import { Outlet } from 'react-router-dom';
import { useLocation, useNavigate } from 'react-router';
import { Fragment, useEffect } from 'react';
import Styles from './index.module.css';
import MENUS from './menu';
import userLogo from '@/assets/svg/vertur-girls.svg';

interface MenuItem {
  path: string;
  title: string;
  key: string;
  logo: string;
}
const Layouts = () => {

  const navigate = useNavigate();
  const locationInfo = useLocation();

  // 点击菜单跳转
  const handleClick = (menu: MenuItem) => {
    console.log('handleClick', menu);
    navigate(menu.path, {
      // 传递当前路由配置信息
      state: menu
    })
  }

  useEffect(() => {
    // 监听页面路由变化修改浏览器title
    document.title = locationInfo?.state?.title ? `${locationInfo.state.title} | React自助平台` : 'React自助平台';
  }, [locationInfo?.state?.title])

  return (
    <Fragment>
      <div className={Styles.layoutMain}>
        <div className={Styles.leftMenu}>
          <div className={Styles.userBox}>
            <img src={userLogo} alt="" />
            <div className={Styles.infoBox}>
              <div className={Styles.infoText}>游客1</div>
              <div className={Styles.infoText}>邮箱xx</div>
            </div>
          </div>
          <div >
            {
              MENUS.map((menu: any) => (
                <div onClick={() => handleClick(menu)} key={menu.key} className={Styles.MenuItem}>
                  <span>
                    <i style={{ fontSize: 20 }} className={`iconfont ${menu.logo}`}></i>
                    <span style={{ paddingInline: 4 }}>{menu.title}</span>
                  </span>
                </div>
              ))
            }
          </div>
        </div>
        <div className={Styles.container}>
          <Outlet />
        </div>
      </div>
    </Fragment>
  )
}

export default Layouts;